<template>
  <div class="container">
    <el-dialog title="新增事项" :visible.sync="matterModelShow" width="550px" :before-close="handleClose">
      <div class="container_examine">
        <div class="examine">
          <el-form ref="formInline" :rules="rules" label-position="top" :inline="true" :model="formInline">
            <!--            <el-form-item label="所属部门:" prop="departMent">-->
            <!--              <el-input v-model="formInline.departMent" placeholder="请输入所属部门" />-->
            <!--            </el-form-item>-->
            <el-form-item label="事项唯一标识码:" prop="ldentificationCode" style="width: 98%">
              <el-select
                v-model="formInline.ldentificationCode"
                filterable
                allow-create
                default-first-option
                placeholder="请输入事项唯一标识码"
                @change="changeHandleCode"
              >
                <el-option
                  v-for="item in matterListCode"
                  :key="item.ldentificationCode"
                  :label="item.ldentificationCode"
                  :value="item.ldentificationCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="事项名称:" prop="matterName" style="width: 98%">
              <el-select
                v-model="formInline.matterName"
                filterable
                allow-create
                default-first-option
                placeholder="请选择事项名称"
                @change="changeHandle"
              >
                <el-option
                  v-for="item in matterList"
                  :key="item.id"
                  :label="item.item_name"
                  :value="item.item_name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="是否自动派发:" prop="isSell" style="width: 100%" class="isSell_form">
              <el-radio-group v-model="formInline.isSell" @change="radioleChange">
                <el-radio label="是" />
                <el-radio label="否" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="派发人员:" prop="isSell" style="width: 100%" class="isSell_form" v-if="formInline.isSell == '是'">
              <el-radio-group v-model="formInline.sellPeople" >
                <el-radio label="部门" />
                <el-radio label="乡镇" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="备注:" prop="remark" style="width: 100%" >
              <el-input v-model="formInline.remark" placeholder="" />
            </el-form-item>
            <!--<el-form-item label="更新时间:" prop="time">-->
            <!--<el-date-picker-->
            <!--v-model="formInline.time"-->
            <!--format="yyyy-MM-dd HH:ss:mm"-->
            <!--type="datetime"-->
            <!--placeholder="选择日期"-->
            <!--/>-->
            <!--</el-form-item>-->
            <el-form-item label="自动派发浙政钉账号:" v-if="formInline.sellPeople == '部门' && formInline.isSell == '是'">
              <el-cascader
                style="width: 100%;"
                :options="unitList"
                ref="myCascader"
                :props="{label:'name',value:'code'}"
                @change="handleChange"></el-cascader>
            </el-form-item>
            <div v-if="formInline.sellPeople == '乡镇' && formInline.isSell == '是'">
              <el-form-item :label="item.organizationName" v-for="item in townnameList" :key="item.id">
                <el-cascader
                  v-model="item.townOne"
                  :options="item.list"
                  ref="myCascader"
                  :props="{label:'name',value:'code'}"></el-cascader>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancleBtn('formInline')">取消</el-button>
        <el-button size="small" type="primary" @click="saveBtn('formInline')">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { dateFormat } from '@/views/assistance/utils'
  import { getIdentificationCode,saveMatterList, getMatterDataList,getStructureList,getTownshipList,getTownnameList } from '../api'
  export default {
    props:['matterModelShow'],
    data() {
      return {
        formInline: {
          matterName: '',
          isSell: '是',
          number: '',
          time: '',
          sellPeople:'',
          townOne:'',
          townTwo:'',
          townThree:'',
          townFour:'',
          townFive:'',
          townSix:'',
          townSeven:'',
          townEight:'',
          townNine:'',
          remark:'',
          // departMent:'',
          ldentificationCode:''
        },
        rules: {
          matterName: [
            { required: true, message: '请输入事项名称', trigger: 'blur' }
          ],
          isSell: [
            { required: true, message: '是否自动派发', trigger: 'change' }
          ],
          number: [
            { required: true, message: '请输入办事人联系电话', trigger: 'blur' }
          ],
          time: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          ldentificationCode: [
            { required: true, message: '请选择事项唯一标识码', trigger: 'blur' }
          ]
        },
        options: [],
        value: [],
        matterList: [],
        matterListCode:[],
        loading: false,
        unitList:[],
        townshipList:[],
        selectPeopleList:[],
        townnameList:[]
      }
    },
    watch: {

    },
    created() {
      this.getEventList();
      this.getStructureList();
      this.getTownship();
    },
    methods: {
      formatTime(time) {
        return time ? dateFormat(new Date(time), 'yy-MM-dd') : ''
      },
      changeHandle() {
        this.matterList.map((item) => {
          if (item.item_name === this.formInline.matterName) {
            this.$message({
              type: 'warning',
              message: '此事项已存在'
            })
            this.formInline.matterName = ''
          }
        })
      },
      changeHandleCode(){
        this.matterListCode.map((item) => {
          if (item.ldentificationCode === this.formInline.ldentificationCode) {
            this.$message({
              type: 'warning',
              message: '此事项已存在'
            })
            this.formInline.ldentificationCode = ''
          }
        })
      },
      saveBtn(formName) {
        if(this.formInline.sellPeople == '乡镇'){
          this.townnameList.map((item,index)=>{
            let list = {
              name:item.organizationCode,
              township:item.townOne[0],
              code:item.townOne[1],
            }
            this.selectPeopleList.push(list)
          })
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const data = {
              automatic_distribution: this.formInline.isSell,
              distribution_account:this.formInline.number,
              array: this.selectPeopleList,
              type: this.formInline.sellPeople,
              item_name: this.formInline.matterName,
              // department: this.formInline.departMent,
              ldentificationCode: this.formInline.ldentificationCode,
              remark: this.formInline.remark,
              // submission_time: this.formatTime(this.formInline.time)
            }
            console.log(data);
            // return;
            saveMatterList(data).then(res => {
              if (res.data.code == 200) {
                this.$message({
                  type: 'success',
                  message: '新增成功'
                })
                this.$refs[formName].resetFields();
                this.formInline.sellPeople = '';
                this.formInline.number = '';
                // this.$store.state.matterModelShow = false
                this.$emit('addFun', true)
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      getEventList() {
        getMatterDataList().then(res => {
          console.log(res)
          this.matterList = res.data.data
        })
        getIdentificationCode().then(res => {
          console.log(res)
          this.matterListCode = res.data.data
        })
      },
      // 获取乡镇名称
      getTownname(){
        getTownnameList().then( res => {
          res.data.data.map((item,index)=>{
            this.townshipList.map((data,i)=>{
              if(item.organizationCode == data.code){
                res.data.data[index].list = data.children;
              }
            })
          })
          this.townnameList = res.data.data;
        })
      },
      // 获取乡镇
      getTownship(){
        getTownshipList().then( res => {
          this.townshipList = res.data.data.sjlist;
          this.getTownname()
        })
      },
      getStructureList(){
        getStructureList('事项').then(res => {
          this.unitList = res.data.data.sjlist;
        })
      },
      handleChange(value) {
        this.formInline.number = value[value.length -2]+','+value[value.length -1];
        //let labelName = this.$refs['myCascader'].getCheckedNodes()[0].pathLabels;
        //this.formInline.department = labelName[2];
      },
      cancleBtn(formName) {
        this.formInline.remark = "";
        this.$refs[formName].resetFields()
        this.$emit('addFun', false)
      },
      handleClose(formName){
        this.formInline.remark = "";
        this.$emit('addFun', false)
      },
      radioleChange(){
        if(this.formInline.isSell === "否"){
          this.formInline.sellPeople = '';
          this.formInline.number = '';
        }

      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    ::v-deep .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }
    ::v-deep .el-dialog {
      max-height: 82vh;
      overflow: auto;
    }
    ::v-deep .el-dialog__body {
      margin-top: 25px;
      padding:30px 20px 30px 30px;
    }
    ::v-deep .el-dialog__header {
      background: #fff;
      position: fixed;
      width: 550px;
      z-index: 99;
      /*.el-dialog__title {*/
      /*color: #ffffff;*/
      /*}*/
      .el-dialog__headerbtn {
        top: 14px !important;
        cursor: pointer;
        /*i {*/
        /*color: #ffffff;*/
        /*}*/
      }
    }
    .container_examine{
      margin-top: 15px;
      p{
        font-size: 15px;
        color: #3D4D60;
        font-weight: bold;
      }
      .el-form--inline .el-form-item{
        width: 47%;
        /*margin-bottom:12px;*/
      }
      ::v-deep .el-textarea__inner,
      ::v-deep .el-select,
      ::v-deep .el-cascader,
      ::v-deep .el-date-editor{
        width: 100%;
      }
      ::v-deep .el-cascader{
        //margin-top: 5px;
        /*width: 48%;*/
        //margin-left: 5px;
      }
      ::v-deep .el-form-item__label{
        font-weight: normal;
        line-height:10px;
      }
      .isSell_form{
        ::v-deep .el-form-item__content{
          display: inline-block!important;
          vertical-align: bottom;
          padding-left: 20px;
        }
      }
    }
  }

</style>
